<template>
  <el-dialog
    :title="`${title}目录`"
    :visible.sync="dialogShow"
    width="40%"
    @close="btnCancel"
  >
    <el-form
      label-width="80px"
      size="normal"
      ref="form"
      :rules="formRules"
      :model="formData"
    >
      <el-row type="flex">
        <el-form-item
          label="归属学科"
          label-width="100px"
          size="small"
          prop="subject_id"
        >
          <SelectDirectory v-model="formData.subject_id"></SelectDirectory>
        </el-form-item>
        <el-form-item
          label="目录名称"
          label-width="150px"
          size="small"
          prop="directory_name"
        >
          <el-input
            placeholder="请输入目录名称"
            v-model="formData.directory_name"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row type="flex">
        <el-form-item label="排序" prop="sort" label-width="100px" size="small">
          <el-input-number v-model="formData.sort" :min="1" :max="1000">
          </el-input-number>
        </el-form-item>
        <el-form-item
          label="是否显示"
          prop="is_show"
          label-width="220px"
          size="small"
        >
          <el-switch
            v-model="formData.is_show"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-row>
      <el-form-item label="目录图标" label-width="100px">
        <!-- 上传 -->
        <upload-image
          v-model="formData.directory_icon"
          ref="UploadImage"
        ></upload-image>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="btnCancel">取消</el-button>
      <el-button type="primary" @click="btnOk">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { adddirectoryApi, editdirectoryApi, showdirectoryApi } from '../../../api/directory'
import SelectDirectory from './select-directory.vue'
import UploadImage from './upLoad-image.vue'
export default {
  name: 'DirectoryPop',
  components: {
    SelectDirectory, UploadImage
  },
  data() {
    return {
      xtoken: '',
      // 控制表单变量
      dialogShow: false,
      // 表单数组
      list: [],
      // 表单数据变量
      formData: {
        // 目录名称
        directory_name: '',
        // 归属学科
        subject_id: '',
        // 排序
        sort: 10,
        // 图片地址
        directory_icon: '',
        // 是否显示
        is_show: 1
      },
      formRules: {
        directory_name: [{ required: true, message: '请输入', trigger: 'blur' }],
        subject_id: [{ required: true, message: '请选择', trigger: 'change' }],
        sort: [{ required: true, message: '请输入', trigger: 'change' }],
        is_show: [{ required: true, message: '请输入', trigger: 'change' }]
      }
    }
  },
  //  计算属性
  computed: {
    title() {
      return this.formData.id ? '修改' : '创建'
    }
  },
  // 方法
  methods: {

    // 提交
    async btnOk() {
      // 1校验表单
      await this.$refs.form.validate()
      // 2加工数据
      // 3发送请求
      this.formData.id ? await editdirectoryApi(this.formData) : await adddirectoryApi(this.formData)
      //4 提示成功
      this.$message.success(this.formData.id ? '修改成功' : '创建成功')
      // 5关闭弹框和
      this.dialogShow = false
      //6 更新列表
      // this.initData()
      this.$emit('updateList')
      // 表单重置
      this.btnCancel()
    },
    // 取消
    async btnCancel() {
      // 表单重置
      this.formData = {
        directory_name: '',
        subject_id: '',
        sort: 10,
        directory_icon: '',
        is_show: 1
      }
      this.$refs.UploadImage.fileList = []
      this.dialogShow = false
      // 需要延迟才能解除校验
      setTimeout(() => {
        this.$refs.form.clearValidate()
      }, 300);

    },
    // 回显
    async showdirectory(id) {
      // console.log(id);
      const res = await showdirectoryApi(id)
      console.log(res);
      this.formData = res
      this.dialogShow = true

    },

  }
}
</script>

<style>
</style>